<template>
  <el-drawer
    size="50%"
    class="custom-drawer"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
  >
    <div class="title"><h3>{{ title }}</h3></div>
    <div class="body" style="padding-bottom: 500px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <el-card class="title-card" shadow="none">
            <div slot="header" class="title-card-header">
              基本信息
            </div>
            <el-form ref="form1" disabled :model="ruleForm" :rules="rules" label-position="top" label-suffix=" :">
              <el-row :gutter="60">
                <el-col :span="12">
                  <el-form-item label="资源名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资源属性分类" prop="attributeType">
                    <el-select v-model="ruleForm.attributeType">
                      <el-option
                        v-for="item in resource_attribute_type"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="资源类型">
                    <el-input value="库表" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="资源介绍" prop="itselfDesc">
                    <el-input v-model="ruleForm.itselfDesc" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="资源存储格式" prop="storageFormat">
                    <el-cascader
                      v-model="ruleForm.storageFormat"
                      style="width: 100%"
                      :options="resource_storage_format"
                      :props="{
                        value: 'code',
                        label: 'name'
                      }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="资源标签" prop="labels">
                    <el-select
                      v-model="ruleForm.labels"
                      filterable
                      allow-create
                      multiple
                    >
                      <el-option
                        v-for="item in resource_tag"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="资源负责方">
                    <el-row :gutter="60">
                      <el-col :span="12">
                        <el-form-item label="单位">
                          <el-input disabled :value="ownerInfo.deptName" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="联系人">
                          <el-input disabled :value="ownerInfo.nickname" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="60">
                      <el-col :span="12">
                        <el-form-item label="联系方式">
                          <el-input disabled :value="ownerInfo.phone" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="邮箱">
                          <el-input disabled :value="ownerInfo.email" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="关联系统" prop="cohereSystem">
                    <el-select v-model="ruleForm.cohereSystem" multiple filterable>
                      <el-option
                        v-for="item in relation_system"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-row :gutter="60">
                    <el-col :span="12">
                      <el-form-item label="更新频率" prop="updateFreq">
                        <el-select v-model="ruleForm.updateFreq">
                          <el-option
                            v-for="item in update_frequency"
                            :key="item.name"
                            :value="item.code"
                            :label="item.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="安全开放" prop="safetyArea">
                        <el-select v-model="ruleForm.safetyArea">
                          <el-option
                            v-for="item in safetyArea"
                            :key="item.name"
                            :value="item.value"
                            :label="item.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col>
                  <el-row :gutter="60">
                    <el-col :span="12">
                      <el-form-item label="开放类型" prop="openType">
                        <el-select v-model="ruleForm.openType">
                          <el-option
                            v-for="item in openTypeList"
                            :key="item.name"
                            :value="item.value"
                            :label="item.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item v-show="ruleForm.openType" label="开放条件">
                        <el-select v-model="ruleForm.openCondition">
                          <el-option
                            v-for="item in openCondition"
                            :key="item.name"
                            :value="item.value"
                            :label="item.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col>
                  <el-row :gutter="60">
                    <el-col :span="12">
                      <el-form-item label="共享类型" prop="shareType">
                        <el-select v-model="ruleForm.shareType">
                          <el-option
                            v-for="item in shareTypeList"
                            :key="item.name"
                            :value="item.value"
                            :label="item.name"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col v-show="ruleForm.shareType !== 1" :span="12">
                      <el-form-item v-show="ruleForm.shareType === 2" label="共享条件">
                        <el-input v-model="ruleForm.shareCondition" />
                      </el-form-item>
                      <el-form-item v-show="ruleForm.shareType === 3" label="不予共享依据">
                        <el-input v-model="ruleForm.shareCondition" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col v-if="ruleForm.shareType !== 1">
                  <el-form-item v-if="ruleForm.shareType === 2" label="有条件共享附件">
                    <DragUpload ref="shareFiles1" />
                  </el-form-item>
                  <el-form-item v-if="ruleForm.shareType === 3" label="不予共享依据附件">
                    <DragUpload ref="shareFiles2" />
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="是否上报省平台" prop="reportProvince">
                    <el-select v-model="ruleForm.reportProvince">
                      <el-option
                        v-for="item in reportProvince"
                        :key="item.name"
                        :value="item.value"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item prop="cohereItemType">
                    <el-radio-group v-model="ruleForm.cohereItemType">
                      <el-radio :label="1"> 省平台同步（权责清单）</el-radio>
                      <el-radio :label="2"> 市/单位自定义</el-radio>
                      <el-radio :label="3"> 无事项关联</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item v-show="ruleForm.cohereItemType === 1" label="选择省自定义事项">
                    <el-select v-model="ruleForm.cohereItem" multiple>
                      <el-option
                        v-for="item in provincial_platform_matters"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item v-show="ruleForm.cohereItemType === 2" label="选择市/单位自定义">
                    <el-select v-model="ruleForm.cohereItem" multiple>
                      <el-option
                        v-for="item in city_platform_matters"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col>
                  <el-form-item label="时间范围 " prop="dateValue">
                    <el-date-picker
                      v-model="ruleForm.dateValue"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      value-format="yyyy-MM-dd hh:mm:ss"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="24">
                  <el-form-item label="数据范围 " prop="dataRange">
                    <el-select v-model="ruleForm.dataRange">
                      <el-option
                        v-for="item in data_range"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="数据分级" prop="dataClassification">
                    <el-select v-model="ruleForm.dataClassification">
                      <el-option
                        v-for="item in data_classification"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="12">
                  <el-form-item label="应用场景 " prop="applicationScenario">
                    <el-select v-model="ruleForm.applicationScenario">
                      <el-option
                        v-for="item in application_scenario"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="提供渠道 " prop="provideChannels">
                    <el-select v-model="ruleForm.provideChannels">
                      <el-option
                        v-for="item in provide_channels"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="60">
                <el-col :span="12">
                  <el-form-item label="所属区域 " prop="realm">
                    <el-select v-model="ruleForm.realm">
                      <el-option
                        v-for="item in realm"
                        :key="item.name"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="电子证件照 " prop="requiredLicense">
                    <el-select v-model="ruleForm.requiredLicense">
                      <el-option
                        v-for="item in requiredLicense"
                        :key="item.name"
                        :value="item.value"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="生成目录性质 " prop="shareNature">
                    <el-select v-model="ruleForm.shareNature">
                      <el-option
                        v-for="item in shareNatureList"
                        :key="item.name"
                        :value="item.value"
                        :label="item.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="申请信息" name="2">
          <el-card shadow="none">
            <el-form disabled label-position="top">
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="申请方式：">
                    <el-input value="订阅" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请人：">
                    <el-input disabled :value="subDetail.createName" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="申请部门：">
                    <el-input disabled :value="subDetail.createDeptName" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="申请方联系方式：">
                    <el-input disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="申请方地址：">
                    <el-input disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="应用系统：" prop="applicationSystems">
                    <el-select v-model="subDetail.applyInfo.applicationSystems" multiple>
                      <el-option v-for="item in relation_system" :value="item.code" :label="item.name" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="业务用途：" prop="businessPurpose">
                    <el-input v-model="subDetail.applyInfo.businessPurpose" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预期应用成效：" prop="expectApplicationEffect">
                    <el-input v-model="subDetail.applyInfo.expectApplicationEffect" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="64">
                <el-col :span="12">
                  <el-form-item label="接受库：" prop="receiveDatabase">
                    <el-input v-model="subDetail.applyInfo.receiveDatabase" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-row :gutter="64">
                    <el-col :span="12">
                      <el-form-item label="数据更新频率：" prop="updateFreqNum">
                        <el-input v-model="subDetail.applyInfo.updateFreqNum" type="number" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="单位" prop="updateFreq">
                        <el-select v-model="subDetail.applyInfo.updateFreq">
                          <el-option v-for="item in update_frequency" :value="item.code" :label="item.name" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="使用截止日期" prop="useEndTime">
                    <el-date-picker v-model="subDetail.applyInfo.useEndTime" value-format="yyyy-MM-dd hh:mm:ss" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="申请原因：" prop="reason">
                    <el-input v-model="subDetail.applyInfo.reason" type="textarea" resize="none" :rows="5" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <el-card shadow="none">
            <h2>申请指标</h2>
            <div class="table-box" style="margin-bottom: 70px">
              <el-table
                ref="multipleTable"
                border
                :data="cDetail.info.fields"
              >
                <el-table-column type="selection" width="50px" :selectable="() => false" />
                <el-table-column prop="name" label="指标名称" />
                <el-table-column prop="code" label="英文名称" />
                <el-table-column prop="pk" label="主键">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.pk" disabled />
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类型">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.type" disabled>
                      <el-option
                        v-for="item in api_param_data_type"
                        :key="item.code"
                        :value="item.code"
                        :label="item.name"
                      />
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="处理说明" name="3">
          <el-card class="title-card" shadow="none">
            <div slot="header" class="title-card-header">
              处理说明
            </div>
            <el-form ref="form3" disabled label-position="top" :model="ruleForm3">
              <el-form-item label="处理说明" prop="dealDetail">
                <el-input v-model="ruleForm3.dealDetail" type="textarea" :rows="5" />
              </el-form-item>
            </el-form>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="处理流程" name="4">
          <ProcessForm :table-data="processList" />
        </el-collapse-item>
      </el-collapse>
      <AuditSave v-if="drawer" @save="handleSave" />
    </div>
  </el-drawer>
</template>

<script>
import { http_serve_audit_process, http_serve_publish_data, http_serve_sub_server } from '@/api'
import { mapGetters } from 'vuex'
import { dict_openTypeList, dict_shareTypeList, dict_shareNatureList } from '@/dict'
import ProcessForm from '@/components/AuditForm/publishForm'
import AuditSave from '@/components/AuditForm'
export default {
  name: 'InterfaceForm',
  components: { ProcessForm, AuditSave },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['dict', 'userInfo']),
    resource_attribute_type() {
      return this.dict['resource_attribute_type'] || []
    },
    resource_storage_format() {
      return this.dict['resource_storage_format'] || []
    },
    resource_tag() {
      return this.dict['resource_tag'] || []
    },
    relation_system() {
      return this.dict['relation_system'] || []
    },
    data_range() {
      return this.dict['data_range'] || []
    },
    data_classification() {
      return this.dict['data_classification'] || []
    },
    application_scenario() {
      return this.dict['application_scenario'] || []
    },
    provide_channels() {
      return this.dict['provide_channels'] || []
    },
    realm() {
      return this.dict['realm'] || []
    },
    update_frequency() {
      return this.dict['update_frequency'] || []
    },
    provincial_platform_matters() {
      return this.dict['provincial_platform_matters'] || []
    },
    city_platform_matters() {
      return this.dict['city_platform_matters'] || []
    },
    api_param_data_type() {
      return this.dict['api_param_data_type'] || []
    }
  },
  data() {
    return {
      processList: [],
      ownerInfo: {},
      ruleForm: {
        name: '',
        attributeType: '',
        itselfDesc: '',
        storageFormat: [],
        labels: '',
        cohereSystem: '',
        updateFreq: '',
        safetyArea: true,
        openType: true,
        openCondition: true,
        shareType: 1,
        shareCondition: '', // 共享不共享条件
        shareFiles: [], // 共享不共享附件
        reportProvince: true,
        cohereItemType: 1,
        cohereItem: [],
        dateValue: [],
        // timeRangeStart: '',
        // timeRangeEnd: '',
        dataRange: '',
        dataClassification: '',
        applicationScenario: '',
        provideChannels: '',
        realm: '',
        requiredLicense: true,
        shareNature: true
      },
      rules: {
      },
      ruleForm2: {
        needDispatch: false,
        info: {
          databaseId: '',
          previewCount: '',
          tableId: '',
          fields: [
          ]
        }
      },
      rules2: {},
      ruleForm3: {
        dealDetail: ''
      },
      safetyArea: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      requiredLicense: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      needDispatch: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      shareNatureList: dict_shareNatureList,
      reportProvince: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      cohereItemType: [
        { value: 1, name: '省平台同步（权责清单）' },
        { value: 2, name: '市/单位自定义' },
        { value: 3, name: '无事项关联' }
      ],
      openTypeList: dict_openTypeList,
      openCondition: [
        { value: true, name: '全部开放' },
        { value: false, name: '部分开放' }
      ],
      shareTypeList: dict_shareTypeList,
      drawer: false,
      direction: 'rtl',
      activeNames: ['1', '2', '3', '4'],
      cDetail: {
        info: {
          fields: []
        }
      },
      subDetail: {
        applyInfo: {
          fieldCodes: []
        }
      }
    }
  },
  created() {
    const excludes = ['detail', 'openCondition', 'shareCondition']
    const rules = {}
    for (const ruleFormKey in this.ruleForm) {
      if (excludes.indexOf(ruleFormKey) === -1) {
        rules[ruleFormKey] = [{ required: true, message: '不能为空' }]
      }
    }
    this.rules = {
      ...rules,
      storageFormat: [
        { required: true, validator: this.checkedArray }
      ],
      dateValue: [
        { required: true, validator: this.checkedArray }
      ]
    }
  },
  methods: {
    checkedArray(rule, value, callback) {
      if (!value || Array.isArray(rule) || value.length < 2) {
        return callback(new Error('不能为空'))
      }
      callback()
    },
    open() {
      this.drawer = true
      this.ownerInfo = {
        ...this.userInfo
      }
    },
    async openEdit(item) {
      if (item.auditRequestId) {
        http_serve_audit_process.list({ id: item.auditRequestId }).then(res => {
          this.processList = res
        })
      }
      await this.open()
      // 基本信息
      http_serve_publish_data.read({ id: item.businessId }).then(res => {
        this.cDetail = res
        for (const key in this.ruleForm) {
          this.ruleForm[key] = res[key]
        }
        this.ruleForm.dateValue = [res.timeRangeStart, res.timeRangeEnd]
        this.resource_storage_format.forEach(el => {
          el.children.forEach(sub => {
            if (sub.code === res.storageFormat) {
              this.ruleForm.storageFormat = [el.code, sub.code]
            }
          })
        })

        this.ruleForm2.needDispatch = res.needDispatch
        this.ruleForm3.dealDetail = res.dealDetail

        this.ownerInfo = {
          nickname: res.ownerInfo.name,
          email: res.ownerInfo.email,
          phone: res.ownerInfo.phone,
          deptName: res.ownerInfo.org
        }
        // 订阅表单信息
        http_serve_sub_server.read({ subId: item.id }).then(res2 => {
          this.subDetail = res2
          this.$nextTick(() => {
            res2.applyInfo.fieldCodes.forEach(code => {
              this.$refs.multipleTable.toggleRowSelection(this.cDetail.info.fields.find(v => v.code === code), true)
            })
          })
        })
      })
    },
    async handleSave({ status, files, remark }) {
      // 通过
      if (status) {
        await http_serve_audit_process.pass({
          id: this.subDetail.auditRequestId
        }, {
          files: files,
          remark
        })
      } else {
        // 驳回
        await http_serve_audit_process.reject({
          id: this.subDetail.auditRequestId
        }, {
          files: files,
          remark
        })
      }
      this.drawer = false
      // 返回
      this.$emit('save')
    }
  }
}
</script>

<style lang="scss">
.upload-demo2 {
  .el-upload,
  .el-upload-dragger{
    width: 100%;
  }
}
.body {
  .display-radio {
    .el-radio__label {
      display: none;
    }
  }
}
</style>
